<template>
  <view>
    <view class="main-box">
      <view class="img-container">
        <image
          class="topImg"
          style="height: 510rpx; width: 750rpx"
          model="scaleToFill"
          src="/static/images/bgc_01.png"
        ></image>
        <view style="position:absolute;top:30rpx;right:40rpx">
         <image style="width:40rpx;height:40rpx" src="../../../static/images/photo.png" mode="scaleToFill" />
         <text style="color:#F0E5E5;position:relative;top:-6rpx;left:6rpx">{{userName}}</text>
      </view> 
      </view>
      <view class="containerBody">
        <cmpCard :cardData="myDailyData" @handleDaily="handleOwnView" />
        <cmpCard :cardData="otherDailyData" @handleDaily="handleOtherView" />
        <view style="width: 100%; box-sizing: border-box; height: 126rpx">
          <image class="bottomImg" src="/static/images/bannerBom.png"></image>
        </view>
      </view>
      <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
        <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
      </view>
    </view>
  </view>
</template>
<script>
import cmpCard from '../../../components/cmp-card.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import { getSummaryData } from '@/service/services.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      myDailyData: {
        title: '本人日报',
        info: '查看本人代写提交历史日报',
        count: 0,
      },
      otherDailyData: {
        title: '全厅日报',
        info: '查看全厅历史日报',
        count: 0,
      },
      title: 'Hello',
      userName:''
    }
  },
  onLoad: () => {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  mounted(){
    this.userName=this.$store.state.userInfo.userName 
  },
  onShow() {
    this.getData({
      userId: this.userInfo.userId,
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  watch: {},
  onLoad() {},
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
    roleId(item) {
      return item.roleId
    },
  }),
  methods: {
    getData(item) {
      getSummaryData(item).then((res) => {
        this.myDailyData.count = res.data.leaderNum
        this.otherDailyData.count = res.data.leaderViewNum
      })
    },
    handleOwnView() {
      uni.navigateTo({
        url: '/pages/secretary-daily/daily-view-home/index',
      })
    },
    handleOtherView() {
      uni.navigateTo({
        url: '/pagesA/leader-daily/daily-view-detail/daily-list',
      })
    },
  },
  components: {
    cmpTabBar,
    cmpCard,
  },
}
</script>

<style lang="scss" scoped>
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.img-container {
  width: 100%;
}
.topImg {
  width: 100%;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  width: 100%;
  bottom: -6rpx;
}
</style>
